<template>
  <div class="page-home">
    <div class="home-entry">
      <div class="container">
       <!-- 左侧导航栏 -->
      <home-category></home-category>
      <!-- 轮播图 -->
      <home-banner></home-banner>
      <!-- 新鲜好物 -->
      <home-new></home-new>
      <!-- 人气推荐 -->
      <home-hot></home-hot>
      <!-- 商品模块 -->
      <home-product></home-product>
      </div>
    </div>
  </div>
</template>
<script>
import HomeCategory from './components/home-category.vue'
import HomeBanner from './components/home-banner.vue'
import HomeHot from './components/home-hot.vue'
import HomeNew from './components/home-new.vue'
import HomeProduct from './components/home-product.vue'
import { findNew } from '@/api/home'
import { ref, onMounted } from 'vue'
export default {
  name: 'PageHome',
  components: {
    HomeCategory,
    HomeBanner,
    HomeHot,
    HomeNew,
    HomeProduct

  },
  setup () {
    const List = ref([])
    // 获取好物推荐
    async function loadList () {
      const res = await findNew()
      List.value = res.result
    }

    onMounted(() => {
      loadList()
    })
    return {
      List
    }
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 426px;
  li {
    width: 306px;
    height: 406px;
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
    }
    .desc {
      color: #999;
      font-size: 18px;
    }
  }
}
</style>
